// 自定义hook

// 思路
/* 
  1.直接声明一个use开头的函数
  2.在函数内封装逻辑
  3.return出需要用到的数据
  4.需要的地方直接调用，然后结构出来
*/

// 规则
/* 
  1.不可在件外使用
  2.不可在if for语句里面执行
  原因：useState不可在这两地方使用
*/

import { useState } from "react";

function useToggle() {
  const [value, setvalue] = useState(true);
  const toggle = () => {
    setvalue(!value);
  };
  return {
    value,
    toggle,
  };
}

function App() {
  const { value, toggle } = useToggle();
  return (
    <div className="App">
      <h1>useEffect</h1>
      {value && <div>This is div</div>}
      <button onClick={toggle}>toggle</button>
    </div>
  );
}

export default App;
